---
title: Hướng dẫn di chuyển
---

# Hướng dẫn di chuyển

## Di chuyển RainbowKit

### 2.x.x Thay đổi làm hỏng

Các phần phụ thuộc ngang hàng [wagmi](https://wagmi.sh) và [viem](https://viem.sh) đã đạt `2.x.x` với các thay đổi quan trọng.

Thực hiện theo các bước dưới đây để di chuyển.

**1. Nâng cấp RainbowKit, `wagmi`, và `viem` lên phiên bản mới nhất**

```bash
npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
```

**2. Cài đặt phụ thuộc ngang hàng `@tanstack/react-query`**

Với Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) hiện là phần phụ thuộc ngang hàng cần thiết.

Cài đặt nó với lệnh sau:

```bash
npm i @tanstack/react-query
```

**3. Nâng cấp cấu hình RainbowKit và Wagmi của bạn**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. Kiểm tra thay đổi làm hỏng trong `wagmi` và `viem`**

Nếu bạn sử dụng các hook `wagmi` và các hành động `viem` trong dApp của bạn, bạn sẽ cần làm theo các hướng dẫn di chuyển cho v2:

- [Wagmi v2 Hướng dẫn Di chuyển](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Thay đổi phá vỡ Viem v2](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### Thay đổi trong RainbowKit

**1. Cải thiện hành vi cho ví EIP-6963**

Các ví hỗ trợ tiêu chuẩn kết nối mới EIP-6963 (bao gồm Rainbow, MetaMask, và hơn thế nữa) giờ đây sẽ tự động xuất hiện trong phần `Installed` trong quá trình trải nghiệm Connect Wallet. Điều này đảm bảo rằng người dùng luôn có thể tìm thấy ví yêu thích của họ và kết nối với dApps mà không gặp các xung đột hoặc nút dự phòng.

Các nhà phát triển vẫn có toàn quyền kiểm soát danh sách Ví Tùy chỉnh để nhấn mạnh ví ưa thích cho người dùng cuối. Khuyến khích bạn tiếp tục đưa `injectedWallet` và `walletConnectWallet` vào danh sách của mình để hỗ trợ mọi nền tảng.

**2. Cấu hình Wagmi với getDefaultConfig**

API mới này đơn giản hóa trải nghiệm cấu hình và thay thế nhu cầu sử dụng trực tiếp `createConfig` của Wagmi. Cấu hình chuỗi được đơn giản hóa, bao gồm các nhà cung cấp công cộng suy luận cho `transports`.

Danh sách ví mặc định sẽ được bao gồm tự động, loại bỏ nhu cầu sử dụng `getDefaultWallets` và `connectorsForWallets`.

Bạn có thể tạo một danh sách Ví Tùy chỉnh bằng cách truyền các kết nối Ví Tùy chỉnh hoặc đã nhập khẩu vào `wallets`. Không cần khởi tạo các kết nối ví và truyền `projectId` và `chains` nữa.

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

Bạn không cần phải truyền `chains` vào `<RainbowKitProvider>`.

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. Chuỗi Tùy chỉnh**

Loại `Chain` đã thay đổi theo Wagmi v2 và tiếp tục hỗ trợ metadata `iconUrl` và `iconBackground` của RainbowKit.

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

Ví dụ với `getDefaultConfig`:

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});
```

Ví dụ với `createConfig`:

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. Ví Tùy chỉnh**

Các kết nối ví RainbowKit đã trải qua những thay đổi đáng kể để hỗ trợ Wagmi v2. Tham khảo [tài liệu cập nhật](https://www.rainbowkit.com/docs/custom-wallets) và [ví dụ về kết nối](https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) để nâng cấp bất kỳ Kết nối Ví Tùy chỉnh nào trong dApp của bạn.

Các kết nối ví giờ đây cũng hỗ trợ tiêu chuẩn EIP-6963 với thuộc tính `rdns`. Đảm bảo rằng điều này được điền vào để tránh các tham chiếu trùng lặp đến các ví hỗ trợ EIP-6963 trong danh sách ví của bạn.

### 1.x.x Thay đổi làm hỏng

#### Cập nhật lên wagmi v1

Thành phần phụ thuộc ngang hàng [wagmi](https://wagmi.sh) đã được cập nhật lên `1.x.x`.

Thực hiện theo các bước dưới đây để di chuyển.

**1. Nâng cấp RainbowKit và `wagmi` lên phiên bản mới nhất**

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

**2. Cài đặt phụ thuộc ngang hàng `viem`**

wagmi v1 yêu cầu phụ thuộc ngang hàng `viem`. Cài đặt nó bằng lệnh sau:

```bash
npm i viem
```

**3. Đảm bảo tương thích của bundler và polyfill**

Tham khảo [Cấu hình Webpack của Next.js](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next/next.config.js) của chúng tôi để hướng dẫn cấu hình cho dự án của bạn.

Hướng dẫn khung bổ sung cho Vite và Remix có sẵn [tại đây](https://www.rainbowkit.com/docs/installation#additional-build-tooling-setup).

**4. Kiểm tra thay đổi làm hỏng trong `wagmi`**

Nếu bạn sử dụng các hook `wagmi` trong ứng dụng của mình, bạn sẽ cần thực hiện theo hướng dẫn di chuyển `wagmi` đến v1.

[Bạn có thể xem hướng dẫn di chuyển của họ tại đây](https://wagmi.sh/react/migration-guide).

### 0.12.x Thay đổi làm hỏng

Phụ thuộc ngang hàng wagmi đã được cập nhật lên `0.12.x`.

RainbowKit đã áp dụng kết nối `WalletConnectLegacyConnector` trong `wagmi` để tiếp tục hỗ trợ WalletConnect v1. Hỗ trợ WalletConnect v2 và `WalletConnectConnector` sẽ sớm được phát hành dưới dạng bản vá, không có thay đổi làm hỏng.

Các ví sẽ được chuyển đổi tự động trong các bản phát hành tương lai.

Mỗi dApp bây giờ phải cung cấp một `projectId` từ [WalletConnect Cloud](https://cloud.walletconnect.com/) để kích hoạt WalletConnect v2. Điều này phải được hoàn thành trước khi các máy chủ cầu nối WalletConnect v1 bị ngừng hoạt động vào ngày 28 tháng 6 năm 2023. RainbowKit sẽ âm thầm ưu tiên v1 cho tất cả các ví nếu không có `projectId`.

Thực hiện theo các bước dưới đây để di chuyển.

#### 1. Nâng cấp RainbowKit và `wagmi` lên phiên bản mới nhất

```bash
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
```

#### 2. Cung cấp một projectId từ WalletConnect Cloud

Mọi dApp phụ thuộc vào WalletConnect bây giờ cần phải lấy một `projectId` từ [WalletConnect Cloud](https://cloud.walletconnect.com/). Điều này hoàn toàn miễn phí và chỉ mất vài phút.

Cung cấp `projectId` cho `getDefaultWallets` và các kết nối ví RainbowKit cá nhân như sau:

```ts
const projectId = 'YOUR_PROJECT_ID';

const { wallets } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId,
  chains,
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [
      readyWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);
```

### 0.11.x Thay đổi làm hỏng

Phụ thuộc ngang hàng wagmi đã được cập nhật lên `0.11.x`.

Thực hiện theo các bước dưới đây để di chuyển.

#### 1. Nâng cấp RainbowKit và `wagmi` lên phiên bản mới nhất

```bash
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
```

#### 2. Kiểm tra thay đổi làm hỏng trong `wagmi`

Nếu bạn sử dụng các hook `wagmi` trong ứng dụng của mình, bạn sẽ cần kiểm tra liệu ứng dụng của mình có bị ảnh hưởng bởi các thay đổi làm hỏng trong `wagmi` hay không.

[Bạn có thể xem hướng dẫn di chuyển của họ tại đây](https://wagmi.sh/react/migration-guide#011x-breaking-changes).

### 0.10.x Thay đổi làm hỏng

Phụ thuộc ngang hàng wagmi đã được cập nhật lên `0.10.x`.

Thực hiện theo các bước dưới đây để di chuyển.

#### 1. Nâng cấp RainbowKit và `wagmi` lên phiên bản mới nhất

```bash
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
```

#### 2. Kiểm tra thay đổi làm hỏng trong `wagmi`

Nếu bạn sử dụng các hook `wagmi` trong ứng dụng của mình, bạn sẽ cần kiểm tra liệu ứng dụng của mình có bị ảnh hưởng bởi các thay đổi làm hỏng trong `wagmi` hay không.

[Bạn có thể xem hướng dẫn di chuyển của họ tại đây](https://wagmi.sh/react/migration-guide#010x-breaking-changes).

### 0.9.x Thay đổi làm hỏng

Phụ thuộc ngang hàng wagmi đã được cập nhật lên `0.9.x`.

Thực hiện theo các bước dưới đây để di chuyển.

#### 1. Nâng cấp RainbowKit và `wagmi` lên phiên bản mới nhất

```bash
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
```

#### 2. Kiểm tra thay đổi làm hỏng trong `wagmi`

Nếu bạn sử dụng các hook `wagmi` trong ứng dụng của mình, bạn sẽ cần kiểm tra liệu ứng dụng của mình có bị ảnh hưởng bởi các thay đổi làm hỏng trong `wagmi` hay không.

[Bạn có thể xem hướng dẫn di chuyển của họ tại đây](https://wagmi.sh/react/migration-guide#09x-breaking-changes).

### 0.8.x Thay đổi làm hỏng

Phụ thuộc ngang hàng wagmi đã được cập nhật lên `0.8.x`.

Thực hiện theo các bước dưới đây để di chuyển.

#### 1. Nâng cấp RainbowKit và `wagmi` lên phiên bản mới nhất

```bash
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
```

#### 2. Kiểm tra thay đổi làm hỏng trong `wagmi`

Nếu bạn sử dụng các hook `wagmi` trong ứng dụng của mình, bạn sẽ cần kiểm tra liệu ứng dụng của mình có bị ảnh hưởng bởi các thay đổi làm hỏng trong `wagmi` hay không.

[Bạn có thể xem hướng dẫn di chuyển của họ tại đây](https://wagmi.sh/react/migration-guide#08x-breaking-changes).

### 0.7.x Thay đổi làm hỏng

Nếu bạn đang tạo danh sách ví tùy chỉnh, bạn phải nhập từng ví riêng lẻ để giảm kích thước gói. Lưu ý rằng do ví không còn được đặt tên không gian thông qua `wallet` object, tất cả các ví hiện có hậu tố `Wallet`.

```diff
-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  injectedWallet,
+  rainbowWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.injected({ chains }),
-  wallet.rainbow({ chains }),
-  wallet.metaMask({ chains }),
-  wallet.coinbase({ chains, appName: 'My App' }),
-  wallet.walletConnect({ chains }),
+  injectedWallet({ chains }),
+  rainbowWallet({ chains }),
+  metaMaskWallet({ chains }),
+  coinbaseWallet({ chains, appName: 'My App' }),
+  walletConnectWallet({ chains }),
];
```

Cũng lưu ý rằng lớp tương thích ngược Steakwallet đã bị loại bỏ. Omni nên được sử dụng thay thế.

```diff
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];
```

### 0.4.x Thay đổi làm hỏng

RainbowKit đã cập nhật phụ thuộc ngang hàng `wagmi` lên `0.5.x`.

Thực hiện theo các bước dưới đây để di chuyển.

#### 1. Nâng cấp phụ thuộc

Nâng cấp RainbowKit và wagmi lên phiên bản mới nhất

```bash
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
```

#### 2. Kiểm tra thay đổi làm hỏng trong `wagmi`

Nếu bạn sử dụng các hook `wagmi` trong ứng dụng của mình, bạn sẽ cần kiểm tra liệu ứng dụng của mình có bị ảnh hưởng bởi các thay đổi làm hỏng trong `wagmi` hay không.

[Bạn có thể xem hướng dẫn di chuyển của họ tại đây](https://wagmi.sh/react/migration-guide#05x-breaking-changes).

### 0.3.x Thay đổi làm hỏng

Đã xóa tham số `chainId` từ `createConnector` trong kiểu `Wallet`.

**Lưu ý rằng tất cả các ví được tích hợp sẵn đều sử dụng API mới. Hầu hết người tiêu dùng sẽ không bị ảnh hưởng. Thay đổi này chỉ ảnh hưởng đến người tiêu dùng đã tạo/sử dụng [ví tùy chỉnh](/docs/custom-wallets).**

Nếu trước đây bạn lấy các URL RPC từ `chainId` trên `createConnector`, bạn có thể xóa logic này vì `wagmi` giờ đây xử lý các URL RPC nội bộ khi được sử dụng với `configureChains`.

```diff
import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

export interface MyWalletOptions {
  chains: Chain[];
}

-const chains = [chain.mainnet]
+const { chains } = configureChains(
+  [chain.mainnet],
+  [
+    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  ...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
-   const rpc = chains.reduce(
-     (rpcUrlMap, chain) => ({
-       ...rpcUrlMap,
-       [chainId]: chain.rpcUrls.default,
-     }),
-     {}
-   );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
-       rpc,
      },
    });
  }
  ...
}

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      rainbow({ chains }),
    ],
  },
]);
```

### 0.2.x Thay đổi làm hỏng

RainbowKit đã cập nhật phụ thuộc ngang hàng `wagmi` lên `^0.4`.

Thực hiện theo các bước dưới đây để di chuyển.

#### 1. Nâng cấp phụ thuộc

Nâng cấp RainbowKit và wagmi lên phiên bản mới nhất

```bash
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
```

#### 2. Thay thế nhập khẩu configureChains

Nhập `configureChains` từ wagmi thay vì RainbowKit:

```diff
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
```

#### 3. Di chuyển các nhà cung cấp dịch vụ

RainbowKit không còn xuất một API `apiProvider`. Thay thế nó bằng nhà cung cấp mong muốn của bạn từ wagmi.

```diff
- import { apiProvider } from '@rainbow-me/rainbowkit';
```

#### Alchemy

Nhập `alchemyProvider` từ `wagmi/providers/alchemy`.

```diff
+ import { alchemyProvider } from 'wagmi/providers/alchemy';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);
```

#### Infura

Nhập `infuraProvider` từ `wagmi/providers/infura`.

```diff
+import { infuraProvider } from 'wagmi/providers/infura';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);
```

#### JSON RPC

Nhập `jsonRpcProvider` từ `wagmi/providers/jsonRpc`.

```diff
+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
-   apiProvider.jsonRpc(chain => ({
-     rpcUrl: `https://${chain.id}.example.com`,
-   })),
+   jsonRpcProvider({
+     rpc: chain => ({
+       http: `https://${chain.id}.example.com`,
+     }),
+   }),
  ]
);
```

#### Nhà cung cấp công cộng

Nhập `publicProvider` từ `wagmi/providers/public`.

```diff
+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
```

#### 4. Đổi tên nhà cung cấp wagmi

Đổi tên `WagmiProvider` thành `WagmiConfig`.

```diff
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};
```

Và bạn đã xong! 🌈
